<template>
    <div class="nav-box"
        v-tab-current="{
            curInd:creInd,
            itemName:'nav-item',
            curName:'on'
        }">
        <navItem v-for="(item,index) in navData" :key="index"
            :index="index"
            :item="item"
            @clickNavItem="clickNavItem">
        </navItem>

    </div>
</template>
<script>
    import navItem from "./nav-item"
    import tabCurrent from "./directives/tabCurrent";
    export default {
        name:"navBox",
        components:{navItem},
        props:{
            navData:Array,
            creInd:Number
        },
        directives:{
            tabCurrent
        },
        data(){
            return{}
        },
        methods:{
            clickNavItem(...arg){
                this.$emit("clickNavItem",...arg);
            }
        }
    }
</script>

<style scoped>
    .nav-box{
        height: 50px;
        line-height: 50px;
        width: 100%;
        border-bottom: 1px solid #aaa;
        display: flex;
        justify-content: center;
    }
</style>
